<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生JavaScript操作 Document 文档 HTML文档</title>
    <style>
        html {
            font-size: 12px;
        }
        .item {
            height: 40px;
            font-size: 1.2rem;
            background-color: red;
            color: #fff;
            margin: 10px 10px;
        }
    </style>
</head>
<body>
    <div id="show">

    </div>
    <div id="buttons">

    </div>
    <div id="wrapper">
        <div id="main">
            <button>点击查看自身以及对应的父元素相关信息</button>
        </div>
    </div>

    <ul class="lists">

    </ul>
    <script>
        var lists = document.querySelectorAll('ul.lists')[0]
        datas = [
            {'sn':'Pony Ma','sage':18},
            {'sn':'Pony Ma2','sage':20},
            {'sn':'Pony Ma3','sage':180},
            {'sn':'Pony Ma4','sage':8},
            {'sn':'Pony Ma5','sage':81}
        ]

        for(index in datas){
            var li = document.createElement('li')
            var a = document.createElement('a')
            a.setAttribute('href','#')
            a.innerText = datas[index]['sn']
            var span = document.createElement('span')
            span.innerText = datas[index]['sage']
            var del = document.createElement('button')
            del.innerText = '删除'
            del.onclick = function (event) {
                console.log(this.parentNode.parentNode)
                this.parentNode.parentNode.removeChild(this.parentNode)
            }

            li.appendChild(a)
            li.appendChild(span)
            li.appendChild(del)
            lists.appendChild(li)
        }

    </script>

    <ul class="adds">

    </ul>
    <script>
        var uls = document.querySelectorAll('ul.adds')[0]
        for (var i = 0; i< 10;i++){
            var li = document.createElement('li')
            var btn = document.createElement('button')
            btn.innerText = '第'+ i +'个'
            li.appendChild(btn)
            uls.appendChild(li)
        }

        uls.onclick = function (event) {
            var e = event || window.event
            var target = e.target || window.srcElement
            console.log(target.nodeName.toLocaleLowerCase())
            if(target.nodeName.toLocaleLowerCase() === 'button'){
                target.parentNode.style.backgroundColor = 'red'
            }

        }

    </script>

</body>
<script>
    // 懒加载
    window.onload = function () {
        //对DOM进行操作
        var div = document.querySelector('#show')
        div.innerHTML = '<h1>班级:</h1>'

        // 添加节点
        /*注意： 1.必须明确 标签结构 层之间的关系 包裹
                2.合理嵌套 原则是 大套小 block 》 inline-block 》 inline
        *       3.添加顺序 从里到外 最里层开始进行嵌套
        * */

        // 1.创建节点
        var son_ul = document.createElement('ul')
        for(var i=0; i < 3 ; i++){
            var li = document.createElement('li')
            li.innerText = i

            li.classList.add('item')
            // div.removeClass()
            li.style.display = 'inline-block'
            li.style.width = '100px'
            son_ul.appendChild(li)
        }

        div.appendChild(son_ul)


        var div2 = document.querySelector('#buttons')
        console.log(div2)
        for(var i = 0; i<10; i++){
            var button = document.createElement('button')
            button.innerText = '第' + i + '个按钮';
            /*
            button.onclick = function () {
                console.log('第'+i+'个')
                alert('第'+i+'个')
            }
            */
            // 闭包
            (function (num) {
                button.onclick = function () {
                    console.log('第' + num + '个')
                    alert('第' + num + '个')
                }
            })(i)

            div2.appendChild(button)
        }

        // event 事件对象
        var btn = document.querySelectorAll('#wrapper>#main>button')[0]

        var flag = false
        btn.onclick = function (event) {
            console.log(event.target)
            console.log(event.currentTarget)
            console.log(this)

            flag = !flag

            if (flag) {
                //this.style.width = '100px'
                this.style.height = '50px'
                this.style.fontSize = '1.5rem'
            }else {
                //this.style.width = '100px'
                this.style.height = '20px'
                this.style.fontSize = '1rem'
            }

            //this.style.width = '100px'
            //this.style.height = '50px'
            //this.style.fontSize = '1.5rem'
        }








    }
</script>
</html>